<template>
    <div>
      <el-button type="primary" @click="showAddModal">新增角色</el-button>
      <el-table :data="roles" style="width: 100%">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="角色名称"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="showEditModal(scope.row)">修改</el-button>
            <el-button type="text" @click="deleteRole(scope.row.id)">删除</el-button>
            <el-button type="text" @click="viewRole(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <el-dialog title="新增角色" :visible.sync="showAdd">
        <el-input v-model="newRoleName" placeholder="角色名称"></el-input>
        <el-button type="primary" @click="addRole">确认新增</el-button>
        <el-button @click="hideAddModal">取消</el-button>
      </el-dialog>
  
      <el-dialog title="修改角色" :visible.sync="showEdit">
        <el-input v-model="editRoleName" :value="selectedRole.name"></el-input>
        <el-button type="primary" @click="updateRole">确认修改</el-button>
        <el-button @click="hideEditModal">取消</el-button>
      </el-dialog>
  
      <el-dialog title="角色详情" :visible.sync="showView">
        <p>角色名称: {{ selectedRole.name }}</p>
        <el-button @click="hideViewModal">关闭</el-button>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        roles: [
          { id: 1, name: "角色1" },
          { id: 2, name: "角色2" },
          { id: 3, name: "角色3" },
        ],
        showAdd: false,
        showEdit: false,
        showView: false,
        newRoleName: "",
        editRoleName: "",
        selectedRole: {},
      };
    },
    methods: {
      showAddModal() {
        this.showAdd = true;
      },
      hideAddModal() {
        this.showAdd = false;
        this.newRoleName = "";
      },
      addRole() {
        const newId = this.roles.length + 1;
        this.roles.push({ id: newId, name: this.newRoleName });
        this.hideAddModal();
      },
      showEditModal(role) {
        this.showEdit = true;
        this.selectedRole = role;
        this.editRoleName = role.name;
      },
      hideEditModal() {
        this.showEdit = false;
        this.selectedRole = {};
        this.editRoleName = "";
      },
      updateRole() {
        this.selectedRole.name = this.editRoleName;
        this.hideEditModal();
      },
      deleteRole(id) {
        this.roles = this.roles.filter((role) => role.id !== id);
      },
      viewRole(role) {
        this.showView = true;
        this.selectedRole = role;
      },
      hideViewModal() {
        this.showView = false;
        this.selectedRole = {};
      },
    },
  };
  </script>
  